<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="colorpicker">
        <title>Configuration, methods and events of Kendo UI ColorPicker</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/colorpicker.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/colorpicker.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouicolorpicker"><a href="#kendouicolorpicker">kendo.ui.ColorPicker</a></h1>

<p>A drop-down color picker widget.</p>

<p>This widget can be used as a replacement for the browser's built-in color
picker widget - <code>&lt;input type="color"&gt;</code> in HTML5.  It can be
instantiated from such an element and by default it will replace it in
the DOM.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-buttons">
<a href="#configuration-buttons">buttons </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Specifies whether the widget should display the Apply / Cancel buttons.</p>

<p>Applicable only for the HSV selector, when a <a href="#configuration-palette"><code>pallete</code></a> is not specified.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  buttons: false
})
&lt;/script&gt;
</code></pre>

<h3 id="configuration-clearButton">
<a href="#configuration-clearButton">clearButton </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>Specifies whether the widget should display the 'Clear color' button.</p>

<p>Applicable only for the HSV selector, when a <a href="#configuration-palette"><code>pallete</code></a> is not specified.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  clearButton: false
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-columns">
<a href="#configuration-columns">columns </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The number of columns to show in the color dropdown when a <a href="#configuration-palette"><code>pallete</code></a> is specified.
This is automatically initialized for the "basic" and "websafe" palettes.
If you use a custom palette then you can set this to some value that makes sense for your colors.</p>

<h4>Example - wrap list of colors on two rows with 3 columns</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
  columns: 3
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-tileSize">
<a href="#configuration-tileSize">tileSize </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: 14)</em>
</h3>

<p>The size of a color cell.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: "basic",
  tileSize: 32
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-tileSize.width">
<a href="#configuration-tileSize.width">tileSize.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 14)</em>
</h3>

<p>The width of the color cell.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: "basic",
  tileSize: { width: 40 }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-tileSize.height">
<a href="#configuration-tileSize.height">tileSize.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 14)</em>
</h3>

<p>The height of the color cell.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: "basic",
  tileSize: { height: 40 }
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages">
<a href="#configuration-messages">messages </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Allows localization of the strings that are used in the widget.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update",
    cancel: "Discard"
  }
})
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.apply">
<a href="#configuration-messages.apply">messages.apply </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Apply")</em>
</h3>

<p>Allows customization of the "Apply" button text.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  messages: {
    apply: "Update"
  }
})
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.cancel">
<a href="#configuration-messages.cancel">messages.cancel </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Cancel")</em>
</h3>

<p>Allows customization of the "Cancel" button text.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  messages: {
    cancel: "Discard"
  }
})
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.previewInput">
<a href="#configuration-messages.previewInput">messages.previewInput </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Color Hexadecimal Code")</em>
</h3>

<p>Allows customization of the "Color Hexadecimal Code" preview input title.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  messages: {
    previewInput: "Edit Color"
  }
})
&lt;/script&gt;
</code></pre>

<h3 id="configuration-palette">
<a href="#configuration-palette">palette </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> <em>(default: null)</em>
</h3>

<p>When a non-null <code>palette</code> argument is supplied, the drop-down will be
a simple color picker that lists the colors. The following are supported:</p>

<ul>
<li><p>"basic" -- displays 20 basic colors</p></li>
<li><p>"websafe" -- display the "web-safe" color palette</p></li>
<li><p>otherwise, pass a string with colors in HEX representation separated with
commas, or an array of colors, and it will display that palette instead.
If you pass an array it can contain strings supported by <a href="/api/javascript/kendo#parseColor">parseColor</a> or
<a href="/api/javascript/kendo#Color">Color</a> objects.</p></li>
</ul>

<p>If <code>palette</code> is missing or <code>null</code>, the widget will display the HSV
selector.</p>

<h4>Example - use "websafe" palette</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: "websafe"
});
&lt;/script&gt;
</code></pre>

<h4>Example - use list of colors</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  palette: [ "#000", "#333", "#666", "#999", "#ccc", "#fff" ],
  columns: 6
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-opacity">
<a href="#configuration-opacity">opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>Only for the HSV selector.  If <code>true</code>, the widget will display the opacity slider.
Note that currently in HTML5 the <code>&lt;input type="color"&gt;</code> does not support opacity.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  opacity: true
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-preview">
<a href="#configuration-preview">preview </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Only applicable for the HSV selector.</p>

<p>Displays the color preview element, along with an input field where the end user can paste a color in a CSS-supported notation.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  preview: false
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-toolIcon">
<a href="#configuration-toolIcon">toolIcon </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: null)</em>
</h3>

<p>A CSS class name to display an icon in the color picker button.  If
specified, the HTML for the element will look like this:</p>

<pre><code>&lt;span class="k-tool-icon ${toolIcon}"&gt;
  &lt;span class="k-selected-color"&gt;&lt;/span&gt;
&lt;/span&gt;
</code></pre>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  toolIcon: "k-foreColor"
});
&lt;/script&gt;
</code></pre>

<h3 id="configuration-value">
<a href="#configuration-value">value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><code>Color</code> <em>(default: null)</em>
</h3>

<p>The initially selected color.
Note that when initializing the widget from an <code>&lt;input&gt;</code> element, the initial color will be decided by the field instead.</p>

<h4>Example</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  value: "#b72bba"
});
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-close"><a href="#methods-close">close</a></h3>

<p>Closes the popup.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.open();

setTimeout(function() {
    colorpicker.close();
}, 1000);
&lt;/script&gt;
</code></pre>

<h3 id="methods-open"><a href="#methods-open">open</a></h3>

<p>Opens the popup element with the color selector.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.open();
&lt;/script&gt;
</code></pre>

<h3 id="methods-toggle"><a href="#methods-toggle">toggle</a></h3>

<p>Toggles the popup.</p>

<h4>Example</h4>

<pre><code>&lt;input id="colorpicker" type="color" /&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.toggle();
&lt;/script&gt;
</code></pre>

<h3 id="methods-value">
<a href="#methods-value">value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><code>Color</code> <em>(default: null)</em>
</h3>

<p>Get or set the selected color. If no argument is given, this returns the
currently selected color as a string in format #FFFFFF when the <code>opacity</code>
option is off, or rgba(255, 255, 255, 1) when <code>opacity</code> is requested.</p>

<p>If one argument is given, it selects the new color and updates the UI.  The
argument can be a string in <strong>hex</strong>, <strong>rgb</strong> or <strong>rgba</strong> format, or a <a href="/api/javascript/kendo#Color">Color</a> object.
This does not trigger the "change" event.</p>

<h4>Parameters</h4>

<h5>color <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(optional)</em>
</h5>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> the string representation of the current color.</p>

<h4>Example</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");

// set picker value
colorpicker.value("#ccc");

// get picker value
var value = colorpicker.value();
&lt;/script&gt;
</code></pre>

<h3 id="methods-color"><a href="#methods-color">color</a></h3>

<p>Get or set the selected color. If no argument is given, this returns the currently selected color as a <a href="/api/javascript/color"><code>kendo.Color</code> object</a>.</p>

<h4>Parameters</h4>

<h5>color <code>kendo.Color</code> <em>(optional)</em>
</h5>

<p>The color that should be set as the current value</p>

<h4>Returns</h4>

<p><code>kendo.Color</code> the current value</p>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Enables or disables the widget.</p>

<h4>Parameters</h4>

<h5>enable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(optional)</em>
</h5>

<p>Whether the widget should be enabled (<code>true</code>) or disabled (<code>false</code>). If not specified, the method will enable the widget.</p>

<h4>Example - disable the color picker</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.enable(false);
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-change"><a href="#events-change">change</a></h3>

<p>Fires when a color was selected, either by clicking on it (in the
simple picker), by clicking ENTER or by pressing "Apply" in the HSV
picker.</p>

<h4>Event Data</h4>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The value of the colorpicker.</p>

<h4>Example - subscribe to the "change" event during initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  change: function(e) {
    console.log("The picked color is ", e.value);
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "change" event after initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
function picker_change(e) {
  console.log("The picked color is ", e.value);
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("change", picker_change);
&lt;/script&gt;
</code></pre>

<h3 id="events-select"><a href="#events-select">select</a></h3>

<p>Fires as a new color is displayed in the drop-down picker.  This is
not necessarily the "final" value; for example this event triggers
when the sliders in the HSV selector are dragged, but then pressing
ESC would cancel the selection and the color will revert to the
original value.</p>

<h5>e.value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The value of the colorpicker.</p>

<h4>Example - subscribe to the "select" event during initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  select: function(e) {
    console.log("The selected color is ", e.value);
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "select" event after initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
function picker_select(e) {
  console.log("The selected color is ", e.value);
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("select", picker_select);
&lt;/script&gt;
</code></pre>

<h3 id="events-open"><a href="#events-open">open</a></h3>

<p>Fires when the picker popup is opening.</p>

<h4>Example - subscribe to the "open" event during initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  open: function() {
    console.log("Picker popup opened");
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "open" event after initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
function picker_open() {
  console.log("Picker popup opened");
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("open", picker_open);
&lt;/script&gt;
</code></pre>

<h3 id="events-close"><a href="#events-close">close</a></h3>

<p>Fires when the picker popup is closing.</p>

<h4>Example - subscribe to the "close" event during initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
$("#colorpicker").kendoColorPicker({
  close: function() {
    console.log("Picker popup closed");
  }
});
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "close" event after initialization</h4>

<pre><code>&lt;div id="colorpicker"&gt;&lt;/div&gt;
&lt;script&gt;
function picker_close() {
  console.log("Picker popup closed");
}
$("#colorpicker").kendoColorPicker();
var colorpicker = $("#colorpicker").data("kendoColorPicker");
colorpicker.bind("close", picker_close);
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

